<template>
  <div>
    <form-item v-if="formItems.length > 0" :formItems="formItems" @screenConfirm="screenConfirm"></form-item>
    <div class="card bg-w border-r">
      <a-config-provider :locale="zhCN">
        <ant-table :columns="columns" :data-source="tableData" :pagination="pagination">
          <template v-slot:bodyCell="{ scope }">
            <template v-if="scope.column.key === 'memberVersion'">
              <div class="form-txt">
                {{ memberTxt[scope.record.memberVersion] }}
              </div>
            </template>
            <template v-else-if="scope.column.key === 'status'">
              <div class="form-txt">
                {{ statusTxt[scope.record.status] }}
              </div>
            </template>
            <template v-else-if="scope.column.key === 'action'">
              <span style="width: 260px">
                <a-button type="link" @click="toEdit(scope.record)">编辑</a-button>
                <a-button type="link" @click="toEditStatus(scope.index)">
                  {{ scope.record.status === 1 ? '禁用' : '启用' }}
                </a-button>
              </span>
            </template>
            <template v-else>
              <div :title="scope.record[scope.column.key]" class="form-txt ellipsis">
                {{ scope.record[scope.column.key] }}
              </div>
            </template>
          </template>
        </ant-table>
      </a-config-provider>
    </div>
  </div>

  <edit-info v-if="detail.show" :info="detail" @close="detail.show = false" @change="tableDataChange"></edit-info>
</template>

<script>
import { defineComponent } from 'vue';

export default defineComponent({
  name: "userAdmin"
});
</script>
<script setup>
import formItem from "@/components/form-item/index.vue";
import EditInfo from './components/editInfo.vue';
import zhCN from "ant-design-vue/es/locale/zh_CN";
import { ref, onMounted } from 'vue';
import api from '@/api/index.js';
import { message } from "ant-design-vue";

const memberTxt = {
  1: '普通会员',
  2: '专业版',
  3: '高级专业版',
  4: '企业版'
};
const statusTxt = {
  0: '未启用',
  1: '启用',
  2: '禁用'
};

const formItems = ref([]);
const columns = [
  {
    title: "用户姓名",
    dataIndex: "fullName",
    key: "fullName",
  },
  {
    title: "手机号",
    dataIndex: "phone",
    key: "phone",
  },
  {
    title: "注册时间",
    dataIndex: "registerDate",
    key: "registerDate",
  },
  {
    title: "会员等级",
    dataIndex: "memberVersion",
    key: "memberVersion",
  },
  {
    title: "会员到期时间",
    dataIndex: "expiryDate",
    key: "expiryDate",
  },
  {
    title: "子账号数量",
    dataIndex: "subAccountNum",
    key: "subAccountNum",
  },
  {
    title: "开通人",
    dataIndex: "openPerson",
    key: "openPerson",
  },
  {
    title: "状态",
    dataIndex: "status",
    key: "status",
  },
  {
    title: "操作",
    key: "action",
    fixed: 'right',
    width: 300,
    scopedSlots: { customRender: 'action' },
  },
];
const form = ref({
  page: 1,
  perPage: 10
});
const tableData = ref([]);
const pagination = ref({
  showSizeChanger: true,
  total: 0,
  showQuickJumper: true,
  current: 1,
  pageSize: 10,
  showTotal: detailTotal => `共 ${detailTotal} 条`,
  onChange: (current, pageSize) => {
    form.value.perPage = pageSize;
    pagination.value.current = current;
    pagination.value.pageSize = pageSize;
    queryUserList(current);
  },
});
const detail = ref({});

// 获取条件
const querySelectScreenData = list => {
  list.forEach(item => {
    form.value[item.key] = item.value;
  });
};
// 点击确认条件筛选
const screenConfirm = e => {
  querySelectScreenData(e);
  queryUserList(1);
};
const queryUserList = current => {
  form.value.page = current;
  api.user.queryUserList(form.value).then(res => {
    pagination.value.total = res.page.total;
    tableData.value = res.list;
  });
}
const toEdit = item => {
  detail.value = {
    ...item,
    show: true
  }
}
const tableDataChange = () => {
  detail.value.show = false;
  queryUserList(form.value.page);
}
// 启用或禁用
const toEditStatus = index => {
  const item = tableData.value[index];
  api.user.updateUser({
    ...item,
    userId: item.userId,
    status: item.status === 1 ? 2 : 1
  }).then(() => {
    tableData.value[index].status = item.status === 1 ? 2 : 1;
  }).catch(err => {
    message.error(err.msg);
  });
}

onMounted(() => {
  queryUserList(1);
});
</script>

<style lang="less" scoped>
.card {
  padding: 20px 24px;

  .btns {
    margin-bottom: 16px;

    &:hover {
      position: relative;
      z-index: 100;
    }

    .ant-btn {
      margin-left: 16px;
    }
  }
}
</style>